<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-search"></i> 筛选查询</div>
                        <div>
                            <el-button @click.native="selectResults">查询结果</el-button>
                            <el-button @click.native="advancedSearch">高级检索</el-button>
                        </div>
                    </el-header>
                    <el-main class="info-main">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item class="select-div" label="订单编号：">
                                <el-input placeholder="订单编号" class="input-width" v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item class="select-div" label="金额范围：：">
                                <el-select class="input-width3" v-model="form.date" placeholder="请选择金额范围">
                                    <el-option label="100元以下" value="100元以下"></el-option>
                                    <el-option label="100-200元" value="100-200元"></el-option>
                                    <el-option label="200-500元" value="200-500元"></el-option>
                                    <el-option label="500-1000元" value="500-1000元"></el-option>
                                    <el-option label="1000元以上" value="1000元以上"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="select-div margin-left" label="对账状态：">
                                <el-select class="input-width3" v-model="form.state" placeholder="全部">
                                    <el-option label="未对账" value="未对账"></el-option>
                                    <el-option label="已对账" value="已对账"></el-option>
                                    <el-option label="异常" value="异常"></el-option>
                                    <el-option label="已冲正" value="已冲正"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-main>
                </el-container>
            </el-main>

            <el-footer>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        <div><i class="el-icon-s-fold"></i> 数据列表</div>
                        <div>
                            <el-button>批量对账</el-button>
                            <el-button @click="exportOrder">导出数据</el-button>
                            <el-select v-model="accordingPageSize" class="margin-left input-width2" placeholder="显示条数">

                            </el-select>
                            <el-select v-model="sort" class="input-width2" placeholder="排列方式">

                            </el-select>
                        </div>
                    </el-header>
                    <el-main class="info-main padding-style">
                        <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="tableData" height="100%" border style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="number" label="订单编号" width="150"></el-table-column>
                            <el-table-column prop="datetime" label="订单金额" width="100"></el-table-column>
                            <el-table-column prop="name" label="支付方式"> </el-table-column>
                            <el-table-column prop="money" label="支付时间" width="160"> </el-table-column>
                            <el-table-column prop="stater" label="对账人员"> </el-table-column>
                            <el-table-column prop="dealTime" label="对账时间" width="160"> </el-table-column>
                            <el-table-column prop="test" label="状态"> </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button  size="mini" @click="handleSelect(scope.$index, scope.row)">查看详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer class="info-foot">
                        <el-checkbox @change="toggleSelectionCheckbox" v-model="checkbox">全选</el-checkbox>
                        <div class="paging-style">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="currentPage1"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </el-footer>
        </el-container>

        <el-dialog title="高级检索" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <el-form ref="search" :model="search" label-width="120px">
                <div class="search-style">
                    <el-form-item label="订单编号：">
                        <el-input class="input-width3" placeholder="订单编号" v-model="search.num"> </el-input>
                    </el-form-item>
                    <el-form-item label="支付方式：">
                        <el-select class="input-width3" v-model="search.personnel" placeholder="全部">
                        </el-select>
                    </el-form-item>
                    <el-form-item label="对账状态：">
                        <el-select class="input-width3" v-model="search.test" placeholder="全部">
                            <el-option label="未对账" value="未对账"></el-option>
                            <el-option label="已对账" value="已对账"></el-option>
                            <el-option label="异常" value="异常"></el-option>
                            <el-option label="已冲正" value="已冲正"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="search-style">
                    <el-form-item label="金额范围：">
                        <el-select class="input-width3" v-model="search.state" placeholder="请选择金额范围">
                            <el-option label="100元以下" value="100元以下"></el-option>
                            <el-option label="100-200元" value="100-200元"></el-option>
                            <el-option label="200-500元" value="200-500元"></el-option>
                            <el-option label="500-1000元" value="500-1000元"></el-option>
                            <el-option label="1000元以上" value="1000元以上"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支付时间：">
                        <el-date-picker v-model="search.datetime" type="datetime" placeholder="请选择时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="对账时间：">
                        <el-date-picker v-model="search.dealtime" type="datetime" placeholder="请选择时间"></el-date-picker>
                    </el-form-item>
                </div>
                <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="searchReset">重 置</el-button>
          <el-button type="primary" @click="retrieve">开始检索</el-button>
        </span>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                form:{
                    name:"",
                    state:"",
                    date:""
                },
                search:{
                    num:'',
                    datetime:'',
                    dealtime:'',
                    state:'',
                    personnel:'',
                    test:''
                },
                batchOperation:'',
                accordingPageSize:"",
                sort:"",
                multipleSelection: [],
                moreOperation:"",
                pageSize:10,
                total:2,
                currentPage1:1,
                dialogVisible: false,
                checkbox: false,
                tableData: [{
                    number: '201807196398345',
                    datetime:'¥19198.00',
                    name: '支付宝',
                    money: '2018-07-19 14:48:38',
                    stater: 'N/A',
                    dealTime: 'N/A',
                    test:'未对账'
                },{
                    number: '201807196398345',
                    datetime:'¥19198.00',
                    name: '支付宝',
                    money: '2018-07-19 14:48:38',
                    stater: 'admin',
                    dealTime: '2018-07-19 14:48:38',
                    test:'已对账'
                },{
                    number: '201807196398345',
                    datetime:'¥19198.00',
                    name: '支付宝',
                    money: '2018-07-19 14:48:38',
                    stater: 'admin',
                    dealTime: '2018-07-19 14:48:38',
                    test:'异常'
                },]
            }
        },
        methods:{
            selectResults(){
                alert("执行查询结果")
            },
            exportOrder(){
                alert("执行导出数据")
            },
            advancedSearch(){
                this.dialogVisible = true;
            },
            searchReset(){
                this.search.num='';
                this.search.datetime='';
                this.search.dealtime='';
                this.search.state='';
                this.search.personnel='';
            },
            handleSelect(index, row) {
                this.$router.replace({ path: "/finance/reconciliationInfo" });
            },
            handleSizeChange(val) {
                alert(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                alert(`当前页: ${val}`);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if(val.length == this.tableData.length){
                    this.checkbox = true;
                }else if(val.length != this.tableData.length){
                    this.checkbox = false;
                }
            },
            toggleSelectionCheckbox(){
                if(this.checkbox){
                    this.tableData.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                }else{
                    this.$refs.multipleTable.clearSelection();
                }
            },
            configButton(){
                alert("执行确定批量操作...")
            },
            handleClose(done) {
                done();
            },
        }
    }
</script>

<style scoped>
    .badges {
        height: 60px;
        padding: 10px;
    }
    .common-home,.content-header{
        border-bottom:1px solid #E4E4E4;
        position: relative;
    }
    .common-home>div{
        display: inline-block;
        width:100px;
        height:50px;
        vertical-align: top;
        text-align: center;
        line-height: 50px;
        color:#666666;
    }
    .common-home>.refresh{
        position: absolute;
        right:10px;
    }
    .common-home>div>span{
        border:4px solid #0399FE;
        display: inline-block;
        width: 0px;
        height: 15px;
        vertical-align: middle;
        margin-right: 5px;
        background-color: #0399FE;
    }
    .parent-body{
        border:1px solid #E4E4E4;
    }
    .content-header{
        height:50px;
        line-height: 50px;
        background-color:#F3F3F3;
        color:#666666;
        position: relative;
        text-align: left;
    }
    .info-main{
        background-color:#fff;
    }

    .content-header>div{
        display: inline-block;
    }
    .content-header>div:last-of-type{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:200px;
    }
    .select-div{
        display: inline-block;
        width:300px;
    }
    .input-width2{
        width:120px;
    }
    .input-width3{
        width:220px;
    }
    .padding-style{
        padding:0 !important;
    }

    .info-foot{
        background-color:#FDFDFE;
        height:60px;
        line-height: 60px;
        position: relative;
    }
    .paging-style{
        position: absolute;
        right:10px;
        display: inline-block;
        top:15px;
    }
    .margin-left{
        margin-left:10px;
    }
    .search-style{
        width:50%;
        display: inline-block;
        vertical-align: top;
    }
</style>

